{% extends "exam_system/base.html" %}
{% load static %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <!-- 左侧导航栏 -->
        <div class="col-md-3">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">考生中心</h5>
                </div>
                <div class="list-group list-group-flush">
                    <a href="{% url 'exam_system:dashboard' %}" class="list-group-item list-group-item-action active">
                        <i class="fas fa-home"></i> 首页
                    </a>
                    <a href="{% url 'exam_system:exam_list' %}" class="list-group-item list-group-item-action">
                        <i class="fas fa-book"></i> 我的考试
                    </a>
                    <a href="{% url 'exam_system:exam_list' %}?filter=finished" class="list-group-item list-group-item-action">
                        <i class="fas fa-history"></i> 考试记录
                    </a>
                    <a href="{% url 'exam_system:profile' %}" class="list-group-item list-group-item-action">
                        <i class="fas fa-user"></i> 个人信息
                    </a>
                </div>
            </div>
        </div>

        <!-- 右侧内容区 -->
        <div class="col-md-9">
            <!-- 欢迎卡片 -->
            <div class="card mb-4">
                <div class="card-body">
                    <h4 class="card-title">欢迎，{{ user.nickname|default:user.name }}！</h4>
                    <p class="card-text">上次登录时间：{{ user.last_login|date:"Y-m-d H:i"|default:"首次登录" }}</p>
                    <div class="mt-3">
                        <div class="progress" style="height: 20px;">
                            <div class="progress-bar" role="progressbar"
                                 style="width: {{ completed_exams_percentage|default:'0' }}%;"
                                 aria-valuenow="{{ completed_exams_percentage|default:'0' }}"
                                 aria-valuemin="0"
                                 aria-valuemax="100">
                                {{ completed_exams_count|default:'0' }}/{{ total_exams_count|default:'0' }} 考试完成
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 可报名考试卡片 -->
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">可报名考试</h5>
                    <a href="{% url 'exam_system:available_exams' %}" class="btn btn-sm btn-primary">查看全部</a>
                </div>
                <div class="card-body">
                    {% if available_exam_rooms %}
                    <div class="list-group">
                        {% for exam_room in available_exam_rooms %}
                        <div class="list-group-item">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-1">{{ exam_room.name }}</h6>
                                    <p class="mb-1">
                                        <small>开始时间：{{ exam_room.start_time|date:"Y-m-d H:i" }}</small><br>
                                        <small>考试时长：{{ exam_room.duration }}分钟</small>
                                    </p>
                                </div>
                                <div>
                                    {% if exam_room.is_registered %}
                                    <button class="btn btn-sm btn-secondary" disabled>已报名</button>
                                    {% else %}
                                    <form method="post" action="{% url 'exam_system:register_exam' exam_room.id %}" class="d-inline">
                                        {% csrf_token %}
                                        <button type="submit" class="btn btn-sm btn-primary">立即报名</button>
                                    </form>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <p class="card-text">暂无可报名的考试</p>
                    {% endif %}
                </div>
            </div>

            <!-- 考试信息卡片 -->
            <div class="row">
                <div class="col-md-6 mb-4">
                    <div class="card h-100">
                        <div class="card-header">
                            <h5 class="mb-0">最近考试</h5>
                        </div>
                        <div class="card-body">
                            {% if recent_exams %}
                            <div class="list-group">
                                {% for reg in recent_exams %}
                                <div class="list-group-item">
                                    <h6 class="mb-1">{{ reg.exam_room.name }}</h6>
                                    <p class="mb-1">
                                        <small>开始时间：{{ reg.exam_room.start_time|date:"Y-m-d H:i" }}</small><br>
                                        <small>考试时长：{{ reg.exam_room.duration }}分钟</small>
                                    </p>
                                    {% if reg.exam_room.status == 'preparing' %}
                                    <span class="badge bg-info text-white">未开始</span>
                                {% elif reg.exam_room.status == 'in_progress' %}
                                    {% if now > reg.exam_room.end_time %}
                                        <span class="badge bg-secondary text-white">已结束</span>
                                        <a href="{% url 'exam_system:exam_result' reg.exam_room.id %}" class="btn btn-sm btn-outline-info ms-2">查看成绩</a>
                                    {% else %}
                                        <span class="badge bg-success text-white">进行中</span>
                                        {% if reg.status == 'registered' %}
                                            <a href="{% url 'exam_system:take_exam' reg.exam_room.id %}" class="btn btn-sm btn-outline-primary ms-2">进入考试</a>
                                        {% elif reg.status == 'in_progress' %}
                                            <a href="{% url 'exam_system:continue_exam' reg.exam_room.id %}" class="btn btn-sm btn-outline-warning ms-2">继续考试</a>
                                        {% endif %}
                                    {% endif %}
                                {% elif reg.exam_room.status == 'finished' %}
                                    <span class="badge bg-secondary text-white">已结束</span>
                                    <a href="{% url 'exam_system:exam_result' reg.exam_room.id %}" class="btn btn-sm btn-outline-info ms-2">查看成绩</a>
                                {% endif %}
                                </div>
                                {% endfor %}
                            </div>
                            {% else %}
                            <p class="card-text">暂无考试安排</p>
                            <a href="{% url 'exam_system:available_exams' %}" class="btn btn-primary">报名考试</a>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-4">
                    <div class="card h-100">
                        <div class="card-header">
                            <h5 class="mb-0">考试成绩</h5>
                        </div>
                        <div class="card-body">
                            {% if recent_results %}
                            <div class="list-group">
                                {% for result in recent_results %}
                                <div class="list-group-item">
                                    <h6 class="mb-1">{{ result.exam_paper.exam_room.name }}</h6>
                                    <p class="mb-1">
                                        得分：{{ result.exam_paper.total_score|default:"0" }}/{{ result.exam_paper.exam_room.total_score }}
                                        <small class="text-muted">({{ result.exam_paper.submitted_at|date:"Y-m-d H:i" }})</small>
                                    </p>
                                    <div class="progress mt-1" style="height: 5px;">
                                        <div class="progress-bar" role="progressbar"
                                             style="width: {{ result.exam_paper.score_percentage|default:'0' }}%;"
                                             aria-valuenow="{{ result.exam_paper.score_percentage|default:'0' }}"
                                             aria-valuemin="0"
                                             aria-valuemax="100">
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                            {% else %}
                            <p class="card-text">暂无考试记录</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            <!-- 通知公告 -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">通知公告</h5>
                </div>
                <div class="card-body">
                    {% if notifications %}
                        <div class="list-group">
                            {% for notice in notifications %}
                                <div class="list-group-item">
                                    <div class="d-flex w-100 justify-content-between">
                                        <h6 class="mb-1">{{ notice.title }}</h6>
                                        <small class="text-muted">{{ notice.created_at|date:"Y-m-d" }}</small>
                                    </div>
                                    <p class="mb-1">{{ notice.content }}</p>
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <p class="card-text">暂无通知</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}